<template>
  <div class="license">
    <div class="title">
      基础配置
      <hr />
    </div>
    <el-form class="lable-top" label-position="top" size="mini">
      <el-row :gutter="10">
        <el-col v-permission="['super']" :span="12">
          <el-form-item label=" ">
            <el-col :span="8">
              <div>组织</div>
            </el-col>
            <el-col :span="16">
              <el-select v-model="search.org_id" filterable>
                <el-option
                  v-for="(item, index) in company"
                  :key="index"
                  :label="item.name"
                  popper-class="w100"
                  :value="item.id"
                />
              </el-select>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label=" ">
            <el-button @click="getData">查询基础配置许可</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form class="lable-top" label-position="top" size="mini">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label=" ">
            <el-row :gutter="12">
              <el-col :span="8">
                <div>终端接入许可数量</div>
              </el-col>
              <el-col :span="16">
                <el-input readonly :value="info.max_agent_count" />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label=" ">
            <el-row :gutter="12">
              <el-col :span="8">
                <div>终端接入己用数量</div>
              </el-col>
              <el-col :span="16">
                <el-input readonly :value="info.used_agent_count" />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label=" ">
            <el-row :gutter="12">
              <el-col :span="8">
                <div>组织用户许可数量</div>
              </el-col>
              <el-col :span="16">
                <el-input readonly :value="info.max_user_count" />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label=" ">
            <el-row :gutter="12">
              <el-col :span="8">
                <div>组织用户己用数量</div>
              </el-col>
              <el-col :span="16">
                <el-input readonly :value="info.used_user_count" />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label=" ">
            <el-row :gutter="12">
              <el-col :span="4">
                <div>组织用户许可期限</div>
              </el-col>
              <el-col :span="20">
                <el-input readonly :value="info.final_time" />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label=" ">
            <el-row :gutter="12">
              <el-col :span="8">
                <div>状态</div>
              </el-col>
              <el-col :span="16">
                <el-input
                  readonly
                  :value="`${info.expired ? '已过期' : '生效中'}`"
                />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-form class="lable-top" label-position="top" size="mini">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="许可证">
            <el-input
              v-model="info.licence_string"
              :autosize="{ minRows: 8 }"
              spellcheck="false"
              type="textarea"
            />
            <el-button class="mt10 w100" @click="handleImport"
              >导入许可证</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import licence from "@/api/licence";
import org_getall from "@/utils/mixin/org_getall";
export default {
  name: "Basic",
  mixins: [org_getall],
  data: () => {
    return {
      search: {
        org_id: ""
      },
      info: {}
    };
  },
  mounted() {
    this.loadingData();
  },
  methods: {
    async loadingData() {
      await this.loadingOrgGetall();
      await this.getData();
    },
    handleImport() {
      licence
        ._import(
          {
            org_id: this.search.org_id
          },
          {
            licence_string: this.info.licence_string || "1"
          }
        )
        .then(res => {
          this.$message.success(res.data.message);
          this.getData();
        });
    },
    getData() {
      return licence
        .info({
          org_id: this.search.org_id
        })
        .then(res => {
          this.info = res.data.info;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.input-small {
  width: 69% !important;
}
.input-small-2 {
  width: 84.7% !important;
}
.license {
  background-color: white;
  box-shadow: 0 0 4px 1px #ddd;
  border-radius: 6px;
  width: 75%;
  max-width: 800px;
  padding: 20px;
  padding-bottom: 0%;
  margin: auto;
}
.title {
  font-size: 10px;
  color: gray;
}
</style>
